<template>
    <!-- 使用的时流体高度组件 -->
    <div class="table">
      <div class="middle">
      <div class="search">  <el-input v-model="input" placeholder="请输入账号" style="width:200px" ></el-input>
        <el-button icon="el-icon-search" circle @click="searchUser" style="margin-left:8px"></el-button>
      </div>
      <div class="draw">
        <el-button type="primary" round @click="addUser">添加用户</el-button>
      </div>
      </div>
    
    
      <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column align="center"
        fixed
        prop="id"
        label="ID"
        width="">
      </el-table-column>
      <el-table-column align="center"
        prop="name"
        label="昵称"
        width="">
      </el-table-column>
      <el-table-column align="center"
        prop="user"
        label="账号"
        width="">
      </el-table-column>
      <el-table-column align="center"
        prop="password"
        label="密码"
        width="">
      </el-table-column>
      <el-table-column align="center"
        prop="like"
        label="喜好"
        width="">
      </el-table-column>
      <el-table-column align="center"
        prop="imgSrc"
        label="头像路径"
        width="">
      </el-table-column>
      <el-table-column align="center"
        prop="phone"
        label="电话号码"
        width="">
      </el-table-column>
      <el-table-column align="center"
        prop="state"
        label="用户状态"
        width="">
      </el-table-column>
      <el-table-column align="center"
        prop="date"
        label="注册日期"
        width="">
      </el-table-column>
      <el-table-column align="center"
        fixed="right"
        label="操作"
        width="">
        <template slot-scope="scope">
          <!-- <el-button
            @click.native.prevent="addUser(scope.$index,tableData,scope.row)"
            type="text"
            size="small">
           添加
          </el-button> -->
          <el-button
            @click.native.prevent="handleEdit(scope.$index,tableData,scope.row)"
            type="text"
            size="small">
            修改
          </el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index,tableData,scope.row)"
            type="text"
            size="small">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
<!-- 分页 -->

<div class="page">
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size=this.pagesize
      layout="total, sizes, prev, pager, next, jumper"
      :total=this.total>
    </el-pagination>
</div>


    <!-- 对话框表单 -->
    <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="昵称" label-width="120px">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
      <el-form-item label="账号" label-width="120px">
      <el-input v-model="form.user" autocomplete="off"></el-input>
     </el-form-item>
     <el-form-item label="密码" label-width="120px">
      <el-input v-model="form.password" autocomplete="off"></el-input>
     </el-form-item>
     <el-form-item label="喜好" label-width="120px">
      <el-input v-model="form.like" autocomplete="off"></el-input>
     </el-form-item>
     <el-form-item label="电话号码" label-width="120px">
      <el-input v-model="form.phone" autocomplete="off"></el-input>
     </el-form-item>
     <el-form-item label="用户状态" label-width="120px">
      <el-input v-model="form.state" autocomplete="off"></el-input>
     </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary"  @click="submit">确 定</el-button>
  </div>
</el-dialog>
  <!-- 添加用户的内容   -->
   <div class="drawer">
    <el-drawer
  title="添加用户"
  :visible.sync="drawer"
  :direction="direction"
  :before-close="handleClose">
  <span>
   <!-- 用户具体添加的内容 -->
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="昵称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="账号" prop="users">
    <el-input v-model="ruleForm.users"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="ruleForm.password"></el-input>
  </el-form-item>
  <el-form-item label="电话号码" prop="phone">
    <el-input v-model="ruleForm.phone"></el-input>
  </el-form-item>
  <el-form-item label="喜好" prop="like">
    <el-input v-model="ruleForm.like"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即添加</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>

  </span>
</el-drawer>
   </div>

    </div>
   
  </template>
  
  <script>


    export default {
 
       created(){
        this.getUserDate()
       }
   


   ,
  //  async updated(){
  //     this.getUserDate()
  //   },
      methods: {
        submitForm(formName) {
          let yy = new Date().getFullYear();
		      let mm = new Date().getMonth()+1;
		      let dd = new Date().getDate(); 
          let hh = new Date().getHours();
		      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes(); 
        this.$refs[formName].validate((valid) => {
      
          if (valid) {
               this.$axios({
                 url:this.$host+"/addUser",
                 method:"get",
                 params:{
                    name:this.ruleForm.name,
                    user:this.ruleForm.users,
                    password:this.ruleForm.password,
                    phone:this.ruleForm.phone,
                    like:this.ruleForm.like,
                    date:yy+'年-'+mm+'月-'+dd+'日'+'\u00a0'+'\u00a0'+hh+'时:'+mf+"分"
                 } 
                 
               }).then(resp=>{
                console.log(resp.data)
                this.getUserDate() 
               })
               this.drawer=false
          } else {
           alert('error submit!!');
            return false;
          }
        });
        
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    ,
    
    deleteRow(index, rows,currentRow) {
      let all=(this.total-1)
      let newPages=Math.ceil(all/this.pagesize)
        if(this.currentPage>newPages){
          this.handleCurrentChange(this.currentPage-1)
              index=index+this.currentPage*this.pagesize
              rows.splice(index,1);
        }else{
          index=index+(this.currentPage-1)*this.pagesize
        }
           
          this.$axios({
              url:this.$host+"/deletes",
              method:"get",
              params:{
               
                  id:currentRow.id
              }  
             
          }).then(resp=>{
                // console.log(resp.data)
                this.getUserDate() 
          })  
         
         
      },
      // 修改用户信息
      handleEdit(index,rows,currentRow){
        //点击修改打开对话框
         this.dialogFormVisible=true
         this.form=currentRow
         
      },
      addUser(index,rows,currentRow){
           this.drawer=true 
           
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    ,
      // 上传修改信息
      submit(){
        this.dialogFormVisible=false
        // console.log(this.form.id,this.form.user)
        this.$axios({
             url:this.$host+"/updateUser",
             method:"get",
             params:{
                id:this.form.id,
                name:this.form.name,
                user:this.form.user,
                password:this.form.password,
                like:this.form.like,
                phone:this.form.phone,
                state:this.form.state
             }
        }).then(resp=>{
              console.log(resp.data)
        })
      },
      searchUser(){
          //搜索指定用户的
          // console.log(this.input)
          this.$axios({
             url:this.$host+"/searchUser",
             method:"get",
             params:{
                user:this.input
             }
          }).then(resp=>{
              if(resp.data.length>this.pagesize){
                 this.getUserDate()
              }else{
                this.tableData=resp.data
              }
            
          })
      },
      // 分页
      getUserDate(){
             this.$axios({
              url:this.$host+"/getUserDate",
               method:"get",
               params:{
                currentPage:this.currentPage,
                pagesize:this.pagesize
                 
               }
             }).then(resp=>{
               this.tableData=[] 
               this.tableData=resp.data[0]
               this.total=resp.data[1]
             })

       }
      ,
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pagesize=val
        this.getUserDate()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage=val
        this.getUserDate()
      },
      
    },
   
      data() {
        return {
          tableData: [],
          // 修改对话框是否打开
          dialogFormVisible: false,
          form: {
           name:"",
           like:"",
           phone:"",
           state:"", 
          user: '',
          password: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        input: ''
       ,
        currentPage:1,
        pagesize:5,
        total:0,
        drawer: false,
        direction: 'rtl',
        ruleForm:{
            name:"",
            users:"",
            password:"",
           
        },
        rules: {
          name: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
        users:[
          { required: true, message: '请输入用户账号', trigger: 'blur' },
             {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
          ],
          password:[
          { required: true, message: '请输入用户密码', trigger: 'blur' },
             {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
          ],
          phone:[
          { required: true, message: '请输入用户电话号码', trigger: 'blur' },
             {min: 11, max: 11, message: '长度为11个字符', trigger: 'blur'}
          ], 
         like: [
            { required: true, message: '请输入用户喜好', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
        
        }
     
        }
      }
    }
  </script>
  <style scoped>
  .middle{
    width: 100%;
       display: flex;
       justify-content: space-between;
  }
  .draw{
     /* position: absolute;
     right: 79px;
     top: 209px; */
     position: relative;
     left: -112px;
  }
.table{
    margin-top: 80px; 
    /* position:relative */
   
}
.search{
     margin-left: 120px;
     margin-bottom: 20px;
}
.page{
       margin-top:35px;
       margin-left: 70px;
      
}
</style>